import React, { useEffect, useRef } from 'react';
import { DataSet, Network } from 'vis-network/standalone';
import './index.less';
// CSS will be automatically injected into the page.

function App() {
    const containerRef = useRef<HTMLDivElement | null>(null);
    const networkRef = useRef<Network | null>(null);
    useEffect(() => {
        // create an array with nodes
        const nodes = new DataSet([
            { id: 1, label: 'Node 1' },
            { id: 2, label: 'Node 2' },
            { id: 3, label: 'Node 3' },
            { id: 4, label: 'Node 4' },
            { id: 5, label: 'Node 5' },
        ]);

        // create an array with edges
        const edges = new DataSet([
            { id: 1, from: 1, to: 3 },
            { id: 2, from: 1, to: 2 },
            { id: 3, from: 2, to: 4 },
            { id: 4, from: 2, to: 5 },
            { id: 5, from: 3, to: 3 },
        ]);
        // create a network
        const container = containerRef.current!;
        const data = {
            nodes: nodes,
            edges: edges,
        };
        const options = {
            configure: {
                enabled: true,
                filter: 'nodes,edges',
                showButton: true,
            },
            interaction: {
                navigationButtons: true,
                keyboard: true,
            },
        };
        networkRef.current = new Network(container, data, options);

        return () => {
            networkRef.current?.destroy();
            networkRef.current = null;
        };
    }, []);

    return <div className=' w-full w-screen h-screen h-full' ref={containerRef}></div>;
}

export default App;
